<template>
  <!-- v-color="'red'" 全局指令 -->
  <div v-color="'red'">
    <h2>局部中定义的指令</h2>
    <input type="text" v-focus="{ h: 20, w: 200 }" />
<!--    <p v-color="'red'">你好</p>-->
  </div>
</template>

<!-- <script>
export default {
  name: 'ziling',
  // 局部 定义自定义指令
  directives: {
    // 属性名：指令的名称
    // 属性值：指令配置对象
    focus: {
      mounted(el, binding) {
        // binding 指令的信息对象
        // 其中有一个 value 就是指令的值
        el.style.width = binding.value.w + 'px'
        el.style.height = binding.value.h + 'px'
        el.focus()
      }
    }
  }
}
</script> -->

<script setup>
defineOptions({
  name: 'ziling'
})
const vFocus = {
  mounted(el, binding) {
    // binding 指令的信息对象
    // 其中有一个 value 就是指令的值
    el.style.width = binding.value.w + 'px'
    el.style.height = binding.value.h + 'px'
    el.focus()
  }
}
</script>
